let navbox = document.querySelector(".navbox ul");
let main_box = document.querySelector("#main_box ul");

let pageid = 0;
let timer;



const xhr1 = new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getbaicaijiatitle",true);
xhr1.onload = function(){
    if(xhr1.status === 200){
        let res1 = JSON.parse(xhr1.responseText);
        console.log(res1);

        let navboxs = "";
        res1.result.forEach(item => {
            navboxs += `<li id="${item.titleId}">
                            <span>
                            ${item.title}
                            </span>
                        </li>`
            
        });
        navbox.innerHTML = navboxs;
        $(".navbox ul li").eq(0).find("span").css("color","red");
        baicaijia(pageid);
        
        $(".navbox ul li").click(function(){
            pageid = $(this).prop("id");
            baicaijia(pageid);

            // $(this).childer().css("color","red").siblings().css("color","black");
        })

        $(".navbox ul li span").click(function(){
            $(this).css("color","red").parent().siblings().find('span').css("color","black");
        })
        
    }
}
xhr1.send(null);


// console.log(titleIdArr);

//封装
function baicaijia(item){
    const xhr = new XMLHttpRequest();
    xhr.open("get","http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+item,true);
    xhr.onload = function(){
        if(xhr.status === 200){
            let res = JSON.parse(xhr.responseText);
            console.log(res);

            let main_boxs = "";
            res.result.forEach(item => {
                main_boxs += ` <li>
                                <div class="img">
                                    ${item.productImg}
                                </div>
                                <div class="right">
                                    <div class="title">
                                        <h4>
                                            ${item.productName}
                                        </h4>
                                        <div class="price">
                                            ${item.productPrice}
                                        </div>
                                    </div>
                                    <div class="down">
                                            ${item.productCouponRemain}
                                        <div class="click">
                                            <div class="click1">
                                                ${item.productCoupon}
                                            </div>
                                            <div class="click2">
                                                下单链接
                                            </div>
                                        </div>
                                    </div>
                                </div></li>`
            });
            main_box.innerHTML = main_boxs;



            console.log($(".bar").width());
            let spanW = 0;
            timer = setInterval(function(){
                spanW++;
                let num = Math.floor((spanW / $(".bar").width())*100);
                
                $(".down .bar span").text(`${num}%`).width(spanW);
                // $(".clearfix a,.clearfix i").remove();

                $(".clearfix b").text(`已领${Math.floor(120*num/100)}张|剩余${120-Math.floor(120*num/100)}`);

                if(spanW > $(".down .bar").width()){
                    clearInterval(timer)
                }
            },10)
        }
    }
    xhr.send(null);
}


$(".gotop").click(function(){
    $("html").animate({scrollTop:0},1000);
})


